<template>
    <div>
        <header-view :back="true" title="用户反馈"></header-view>
        <div class="feedback-box">
            <div class="gays">
                <img :src="after ? feedbackAfterImg : feedbackBeforeImg" alt=""/>
                <p class="text">{{after ? '谢谢您的反馈~' : '请帮助我们一起改进吧～'}}</p>
            </div>
            <div v-show="!after">
                <div class="feedbacks" id="feedback">
                    <div class="f-list">
                        <h3 class="f-title">您遇到的问题是</h3>
                        <div class="q-box">
                            <ul class="j_s" data-key="type" @click="toggleSelect">
                                <li>刷新慢</li>
                                <li>不好笑</li>
                                <li>闪退 / 黑屏</li>
                                <li>其他</li>
                            </ul>
                        </div>
                    </div>
                    <div class="f-list bold">
                        <h3 class="f-title">出问题的内容</h3>
                        <div class="q-box">
                            <ul class="j_s" data-key="channelId" @click="toggleSelect">
                                <li>图片</li>
                                <li>段子</li>
                                <li>动图</li>
                                <li>其他</li>
                            </ul>
                        </div>
                    </div>
                    <div class="f-list">
                        <h3 class="f-title">请告诉我们一些细节</h3>
                        <div class="q-box">
                            <textarea name="" id="textarea" cols="30" rows="10" placeholder="在这里输入..."></textarea>
                        </div>
                    </div>
                </div>
                <a @click="submit" href="javascript:;" class="submit">提交</a>
            </div>
        </div>
    </div>
</template>

<script>
import HeaderView from './../module/Header.vue'
import utils from './../../utils'
import store from './../../store'

export default {
    name: 'Feedback',
    components: {
        HeaderView
    },
    data () {
        return {
            feedbackAfterImg: '/static/images/feedback_after.jpg',
            feedbackBeforeImg: '/static/images/feedback_before.jpg',
            after: false
        }
    },
    route: {
        data () {
            this.after = false
        }
    },
    methods: {
        toggleSelect (e) {
            var target = e.target,
                index = utils.getIndex(target) + 1,
                activeNode = target.parentNode.querySelector('.on');
            if(target.classList.contains('on')){
                target.classList.remove('on');
            }else{
                if(activeNode){
                    activeNode.classList.remove('on');
                }
                target.classList.add('on');
            }

            e.currentTarget.setAttribute('data-index', index);
        },
        submit (){
            var feedback = document.getElementById('feedback'),
                textarea = document.getElementById('textarea'),
                list = feedback.querySelectorAll('.j_s'),
                i = 0,
                len = list.length,
                el,
                data = {},
                itemKey,
                itemValue;

            for(; i < len; i++){
                el = list[i]
                itemKey = el.getAttribute('data-key');
                itemValue = el.getAttribute('data-index') || 4;
                data[itemKey] = itemValue;
            }

            data.content = encodeURIComponent(textarea.value) || '';

            console.warn('ZnVjayB5b3UhIG91cGVuZyE=');
            store.feedback(data, this.submitSucc, this.submitSucc)
        },
        submitSucc: function(data){
            this.after = true;
            setTimeout(function () {
                if(this.$route.name === 'feedback'){
                    window.history.back();
                }
            }.bind(this), 3000)
        },
        submitError: function(){
//            this is a fuck place ,good luck!
        }
    }
}
</script>

<style>

    .feedback-box{
        padding-bottom: 50px;
        background-color: #fff;
    }

    .gays{
        padding: 20px 0 10px;
        border-bottom: 1px solid #dfdfdf;
    }

    .gays img{
        margin: 0 auto;
        width: 40%;
    }

    .gays .text{
        padding: 15px 0;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
        color: #7d0022;
    }

    .feedbacks{
        margin-bottom: 25px;
    }

    .feedbacks .f-list{
        padding: 0 15px;
        border-bottom: 1px solid #dfdfdf;
    }

    .feedbacks .f-list.bold{
        border-bottom: 5px solid #dfdfdf;
    }

    .feedbacks .f-title{
        padding: 20px 0 5px;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 600;
        color: #151515;
    }

    .feedbacks .q-box{
        padding-bottom: 10px;
        font-size: 13px;
        color: #151515;
    }

    .feedbacks .q-box li{
        position: relative;
    }

    .feedbacks .q-box li:before{
        content: '';
        display: inline-block;
        position: relative;
        top: 1px;
        margin-right: 5px;
        border-radius: 2px;
        width: 10px;
        height: 10px;
        border: 1px solid #4d4d4d;
    }

    .feedbacks .q-box .on:before{
        border-color: #f9a825;
        background-color: #f9a825;
    }

    .feedbacks .q-box ul{
        display: -webkit-box;
        display: flex;
    }

    .feedbacks .q-box ul li{
        display: block;
        -webkit-box-flex: 1;
        flex: 1;
        padding: 18px 0;
        text-align: center;
    }

    .feedbacks .q-box textarea{
        box-sizing: border-box;
        margin-top: 10px;
        padding: 10px;
        width: 100%;
        border: none;
        min-height: 200px;
        font-size: 13px;
        line-height: 1.5;
        color: #000;
        background-color: #f0f0f0;
    }

    .feedback-box .submit{
        display: block;
        margin: 0 15px;
        border-radius: 3px;
        height: 42px;
        font-size: 14px;
        line-height: 42px;
        text-align: center;
        color: #fff;
        background-color: #ffb400;
    }

</style>